<!--
* @author wn
* @date 2024/04/03 11:23:09
* @description: 订单页
!-->
<template>
	<!-- tab -->
	<view style="width: 100%; border-bottom: 0 none; position: fixed; z-index: 2">
		<view style="background: #ffffff; position: relative">
			<view class="h-tab vp-flex">
				<view
					:class="'h-tab-item vp-flex_1 ' + (newFilt == 0 ? 'on' : '')"
					@tap="onFilterChange(0)"
				>
					全部
				</view>
				<view
					:class="'h-tab-item vp-flex_1 ' + (newFilt == 1 ? 'on' : '')"
					@tap="onFilterChange(1)"
				>
					待支付
				</view>
				<view
					:class="'h-tab-item vp-flex_1 ' + (newFilt == 2 ? 'on' : '')"
					@tap="onFilterChange(2)"
				>
					待服务
				</view>
				<view
					:class="'h-tab-item vp-flex_1 ' + (newFilt == 3 ? 'on' : '')"
					@tap="onFilterChange(3)"
				>
					已完成
				</view>
				<view
					:class="'h-tab-item vp-flex_1 ' + (newFilt == 4 ? 'on' : '')"
					@tap="onFilterChange(4)"
				>
					已取消
				</view>
			</view>
		</view>
	</view>
	<!-- list -->
	<block v-if="orderList.length > 0">
		<view
			v-if="orderList != null && orderList.length == 0"
			style="padding: 40rpx; text-align: center"
		>
			<image
				src="/static/images/empty.png"
				mode="widthFix"
				style="width: 200rpx"
			/>
			<view class="f5">没有相关内容~</view>
		</view>
		<view v-else class="od-list">
			<block v-for="(item, index) in orderList" :key="index">
				<view class="od-item" @tap="toOrder">
					<navigator
						:url="`/pages/order/detail?oid=${item.out_trade_no}`"
						class="weui-cell weui-cell_access"
					>
						<image
							:src="item.service_logo_image_url"
							mode="heightFix"
							class="od-logo"
							style="height: 160rpx; margin-right: 20rpx"
						/>
						<view class="weui-cell__bd">
							<view>
								<text style="font-weight: bold">{{ item.service_name }}</text>
							</view>
							<view class="od-info">
								<block v-if="item.service_stype <= 20">
									<view>
										<text
											>{{ item.hospital_name }}（{{ item.area_name }}）</text
										>
									</view>
									<view>
										预约时间：
										<!--
										<formater
											:timestamp="item.starttime"
											format="MM-dd hh:mm"
										></formater>-->
									</view>
									<view>
										就诊人员：
										<text>{{ item.client_name }}</text>
									</view>
								</block>
								<block
									v-if="item.service_stype > 20 && item.service_stype < 100"
								>
									<view>
										<text
											>{{ item.hospital_name }}（{{ item.area_name }}）</text
										>
									</view>
									<view>
										处理时间：
										<!--
										<formater
											:timestamp="item.starttime"
											format="MM-dd hh:mm"
										></formater>
                    -->
									</view>
								</block>
								<block v-if="item.service_stype > 100">
									<view>
										服务时间：
										<!--
										<formater
											:timestamp="item.starttime"
											format="MM-dd hh:mm"
										></formater>
                     -->
									</view>
									<view>
										服务对象：
										<text>{{ item.client_name }}</text>
									</view>
									<!-- <view>服务地址：<text>{{item.address.address}}</text> </view> -->
								</block>
							</view>
						</view>
						<view class="weui-cell__ft">
							<!-- 待付款 -->
							<block v-if="item.trade_state == '待支付'">
								<view style="color: #ffa200"><text>待支付</text></view>
								<view style="color: #ffa200">
									<!--
									<counter
										style="font-size: 24rpx"
										:second="item._exp_time"
										@counterOver="onCounterOver"
									/>-->
								</view>
							</block>
							<!-- 进行中 -->
							<block v-if="item.trade_state == '待服务'">
								<view style="color: #1da6fd"><text>待服务</text></view>
							</block>
							<!-- 已完成 -->
							<block v-if="item.trade_state == '已完成'">
								<view style="color: #21c521"><text>已完成</text></view>
							</block>
							<!-- 已取消 -->
							<block v-if="item.trade_state == '已取消'">
								<view style="color: #999999"><text>已取消</text></view>
							</block>
						</view>
					</navigator>
				</view>
			</block>
		</view>
	</block>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import { getOrderListApi } from '@/api/order'
import { getVerificationCodeApi, getTokenApi } from '@/api/user'
import { filt } from '@/utils/filt'

onLoad(() => {
	// getToken()
	getOrderList()
})

// 获取 token
const getToken = async () => {
	await getVerificationCodeApi('15666015462')
	// 手机获得短信验证码
	// 获取 token
	const { token } = await getTokenApi('15684015762', '9724')
	// 保存 token
	uni.setStorageSync('token', token)
}
// 获取订单列表
const orderList = ref([])
const getOrderList = async () => {
	await getOrderListApi()
	orderList.value = [
		{
			out_trade_no: 'O-TNQMN00156',
			demand: '',
			hospital_id: 5,
			hospital_name: '武汉中心医院',
			price: '0.5',
			receiveAddress: '北京',
			service_code: 'pz3',
			service_id: 4,
			service_name: '就医陪诊（尊享）',
			service_stype: '15',
			starttime: 1703606400000,
			tel: '23',
			order_start_time: 1703646073614,
			transaction_id: '',
			trade_state: '已取消',
			time_end: 0,
			uid: '19',
			code_url: 'weixin://wxpay/bizpayurl?pr=xnsLbB4zz',
			other: '',
			service_state: '0',
			paidPrice: '0',
			area_name: '中部地区',
			service_logo_image_url:
				'http://159.75.169.224/uploads/20231105/90ded71dd1868829b08dae540412c039.jpeg',
			client_name: '张三',
		},
		{
			out_trade_no: 'O-cDcHE00171',
			demand: '',
			hospital_id: 5,
			hospital_name: '武汉中心医院',
			price: '0.5',
			receiveAddress: '北京',
			service_code: 'pz3',
			service_id: 4,
			service_name: '就医陪诊（尊享）',
			service_stype: '15',
			starttime: 1703606400000,
			tel: '23',
			order_start_time: 1703645340979,
			transaction_id: '',
			trade_state: '已取消',
			time_end: 0,
			uid: '19',
			code_url: 'weixin://wxpay/bizpayurl?pr=rwcb7Mozz',
			other: '',
			service_state: '0',
			paidPrice: '0',
			area_name: '中部地区',
			service_logo_image_url:
				'http://159.75.169.224/uploads/20231105/90ded71dd1868829b08dae540412c039.jpeg',
			client_name: '张三',
		},
		{
			out_trade_no: 'O-WDDcJ00187',
			demand: '',
			hospital_id: 5,
			hospital_name: '武汉中心医院',
			price: '0.5',
			receiveAddress: '北京',
			service_code: 'pz3',
			service_id: 4,
			service_name: '就医陪诊（尊享）',
			service_stype: '15',
			starttime: 1703692800000,
			tel: '23',
			order_start_time: 1703750271096,
			transaction_id: '',
			trade_state: '已取消',
			time_end: 0,
			uid: '19',
			code_url: 'weixin://wxpay/bizpayurl?pr=GtdjpxIzz',
			other: '',
			service_state: '0',
			paidPrice: '0',
			area_name: '中部地区',
			service_logo_image_url:
				'http://159.75.169.224/uploads/20231105/90ded71dd1868829b08dae540412c039.jpeg',
			client_name: '张三',
		},
		{
			out_trade_no: 'O-TFmCG00121',
			address: {
				userName: '张三',
				cityName: '广州市',
				countyName: '海珠区',
				detailInfo: '新港中路397号',
			},
			demand: '',
			hospital_id: 5,
			hospital_name: '武汉中心医院',
			price: '0.5',
			receiveAddress: '',
			service_code: 'dp',
			service_id: 1,
			service_name: '代跑取药',
			service_stype: '40',
			starttime: 1703692800000,
			tel: '23',
			order_start_time: 1703750320908,
			transaction_id: '',
			trade_state: '已取消',
			time_end: 0,
			uid: '19',
			code_url: 'weixin://wxpay/bizpayurl?pr=J2RG2Jrzz',
			other: '',
			service_state: '0',
			paidPrice: '0',
			area_name: '中部地区',
			service_logo_image_url:
				'http://159.75.169.224/uploads/20231105/108dd2cc5c333cffcb2911e1b159bddf.png',
		},
	]
}

// 是否选中 通过 props 传递 -- switchTab - 路径后不能带参数
/* const props = defineProps({
	filt: {
		type: Number,
		default: 0,
	},
}) */
// 是否选中
const newFilt = ref(0)
watch(filt, val => (newFilt.value = val))

// 点击 tab 事件
const onFilterChange = on => {
	filt.value = on // 触发 watch
	// newFilt.value = on
	// 切换 list
}
</script>
<style lang="scss">
page {
	border-top: 0.01px solid #f4f4f4;
	background: #f4f4f4;
}

.od-item {
	margin: 20rpx;
	background: #ffffff;
	border: 1rpx solid #eeeeee;
	border-radius: 10rpx;
	overflow: hidden;
}
.od-item .weui-cell {
	padding: 30rpx;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	align-items: stretch;
}
.od-logo {
	width: 100rpx;
	height: 100rpx;
	margin-right: 20rpx;
	border-radius: 10rpx;
}
.od-info view {
	font-size: 24rpx;
	color: #999999;
}
.od-info text {
	font-size: 24rpx;
	color: #999999;
}
.od-item .weui-cell__ft text {
	font-size: 24rpx;
}
.od-list {
	margin-top: 120rpx;
}
</style>
